<template>
  <div class="">
    <el-button type="primary" @click="getCode">获取验证码</el-button>
    <el-button type="primary" @click="setUserAttr">设置用户属性</el-button>
    <el-button type="primary" @click="doLogin">登录</el-button>
    <el-button type="primary">按钮点击测试</el-button>
    <el-button type="primary" @click="handleCustomEvent">自定义事件测试</el-button>

    <div class="text-20px p-20px font-bold" v-for="i in 110" :key="i">首页</div>
    <el-button type="primary" @click="$router.push({ name: 'about' })">关于</el-button>

    <el-input v-model="input" placeholder="请输入" />

    <div class="p-30px bg-red">
      <div class="text-30px font-bold m-30px cursor-pointer bg-blue fxc">div点击事件测试</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()!
const sensors = appContext.config.globalProperties.$sensors
const getCode = () => {
  sensors.track('BuyProduct', {
    // 自定义属性
    ProductName: 'MacBook Pro',
    ProductPrice: 123.45,
    IsAddedToFav: false,
  })
}

const input = ref('')

const doLogin = () => {
  sensors.login('UserId_123456')
}

const setUserAttr = () => {
  sensors.setProfile({ email: 'xxx@xx' })
}

const handleCustomEvent = () => {
  sensors.track('MyCustomEvent', {
    // 自定义属性
    BusinessType: '权限控制',
    ButtonType: 'add',
  })
}

onMounted(() => {})
</script>

<style scoped lang="scss"></style>
